<template>
    <div class="resource-list">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-form :inline="true" :model="form" ref="form" class="demo-form-inline">
                    <el-form-item prop="name" label="资源名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="url" label="资源路径">
                        <el-input v-model="form.url"></el-input>
                    </el-form-item>
                    <el-form-item prop="categoryId" label="资源分类">
                        <el-select clearable v-model="form.categoryId" placeholder="请选择资源分类">
                            <el-option v-for="item in ResourceCategories" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :disabled="isLoading" @click="onSubmit">查询搜索</el-button>
                        <el-button :disabled="isLoading" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
            :data="resources"
            style="width: 100%; margin-bottom: 20px"
            v-loading='isLoading'>
                <el-table-column
                    type="index"
                    label="编号">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="资源名称">
                </el-table-column>
                <el-table-column
                    prop="url"
                    label="资源路径">
                </el-table-column>
                <el-table-column
                    prop="desc"
                    label="描述">
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="添加时间">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--
                分页组件
                total 总记录数
                page-size 每页大小
                分页组件会自动根据 total 和 page-size 计算出一共分多少页
            -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="form.current"
                :page-sizes="[5, 10, 20]"
                :page-size="form.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                :disabled="isLoading">
            </el-pagination>
        </el-card>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getResourcePages } from '@/services/resource'
import { getResourceCategories } from '@/services/resource-category'
import { Form } from 'element-ui'

export default Vue.extend({
    name: 'ResourceList',
    data() {
        return {
            resources: [], // 资源列表
            form: {
                name: '',
                url: '',
                categoryId: null, // 资源分类
                current: 1, // 默认查询第一页数据
                size: 10 // 每页大小
            },
            ResourceCategories: [],
            totalCount: 0,
            isLoading: false
        }
    },
    created() {
        this.loadResources()
        this.loadResourceCategories()
    },
    methods: {
        onSubmit() {
            this.form.current = 1 // 筛选查询从第 1 页开始
            this.loadResources()
        },
        resetForm() {
            (this.$refs.form as Form).resetFields()
            this.form.current = 1 // 重置回到第 1 页
            this.loadResources()
        },
        async loadResources() {
            this.isLoading = true // 展示加载中状态
            const { data } = await getResourcePages(this.form)
            if (data.code === '000000') {
                this.resources = data.data.records
                this.totalCount = data.data.total
            }
            this.isLoading = false // 关闭加载中状态
        },
        async loadResourceCategories() {
            const { data } = await getResourceCategories()
            if (data.code === '000000') {
                this.ResourceCategories = data.data
            }
        },
        handleSizeChange(val: number) {
            this.form.size = val
            this.form.current = 1 // 修改要查询的页码
            this.loadResources()
        },
        handleCurrentChange(val: number) {
            console.log(`当前页: ${val}`)
            // 请求获取对应页码的数据
            this.form.current = val
            this.loadResources()
        }
    }
})
</script>

<style lang="scss" scoped></style>
